import React, { Component } from 'react';
import styles from './creditRisk.less';
import { connect } from 'dva';
import getUrlParam from '@/utils/getUrlParam';
import Link from 'umi/link';
import initChart from '@/utils/initChart';
import { getSimpleBar, getStackBar } from '@/utils/warning-figure-chart.js';

@connect(({ creditrisk }) => ({
  ComplianceData: creditrisk.ComplianceData,
  OViolationData: creditrisk.OViolationData,
  ISPunishData: creditrisk.ISPunishData,
  ISPunishFiveData: creditrisk.ISPunishFiveData,
}))
class creditRisk extends Component {
  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({
      type: 'creditrisk/getComplianceData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
        api_type: '',
      },
    });

    dispatch({
      type: 'creditrisk/getOViolationData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });

    dispatch({
      type: 'creditrisk/getISPunishData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });

    dispatch({
      type: 'creditrisk/getISPunishFiveData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });
  }

  render() {
    let { ComplianceData, OViolationData, ISPunishData, ISPunishFiveData } = this.props;
    // console.log('ComplianceData', this.props);
    if (ISPunishFiveData && ISPunishFiveData.data && document.getElementById('fivechart')) {
      initChart(getSimpleBar('', ISPunishFiveData.data.x, ISPunishFiveData.data.y), 'fivechart');
    }

    if (ISPunishData && ISPunishData.data && document.getElementById('punishchart')) {
      initChart(getStackBar('', ISPunishData.data), 'punishchart');
    }

    let renderPunishChart = () => {
      if (ISPunishData && ISPunishData.data) {
        return <div id="punishchart" className={styles.chartWrap} />;
      }
      return <div className={styles.noDataView}>暂无数据</div>;
    };

    let renderFiveChart = () => {
      if (ISPunishFiveData && ISPunishFiveData.data) {
        return <div id="fivechart" className={styles.chartWrap} />;
      }
      return <div className={styles.noDataView}>暂无数据</div>;
    };
    let renderCompliance = () => {
      let res = [];
      if (!ComplianceData || !ComplianceData.data) {
        res.push(
          <tr>
            <td colSpan="5">暂无数据</td>
          </tr>
        );
        return res;
      }
      for (let i = 0; i < ComplianceData.data.length; i++) {
        res.push(
          <tr className={styles.alignCenter} key={i}>
            <td className={styles.deductionContent}>
              <a
                href={ComplianceData.data[i].title_url}
                className={styles.fileLink}
                target="_blank"
                rel="noopener noreferrer"
              >
                {ComplianceData.data[i].title}
              </a>
            </td>
            <td>{ComplianceData.data[i].process_dept}</td>
            <td>{ComplianceData.data[i].deal_type}</td>
            <td>{ComplianceData.data[i].deal_time}</td>
            <td>{ComplianceData.data[i].deal_level}</td>
          </tr>
        );
      }
      return res;
    };

    let limitTextLength = (str, _length) => {
      let _result = '';
      _result = str.length > _length ? str.substring(0, _length) + '...' : str;
      return _result;
    };
    let renderOViolation = () => {
      let res = [];
      if (!OViolationData || !OViolationData.data) {
        res.push(
          <tr>
            <td colSpan="4">暂无数据</td>
          </tr>
        );
        return res;
      }
      for (let i = 0; i < OViolationData.data.data_list.length; i++) {
        res.push(
          <tr className={styles.alignCenter} key={i}>
            <td>{OViolationData.data.data_list[i].serial_number}</td>
            <td>
              {limitTextLength(OViolationData.data.data_list[i].content, 50)}
              <a style={{ color: '#1D5BC2' }}>查看</a>
            </td>
            <td>{OViolationData.data.data_list[i].reason}</td>
            <td>{OViolationData.data.data_list[i].date}</td>
          </tr>
        );
      }
      return res;
    };

    return (
      <div className={styles.mainWrap}>
        <div className={styles.leftPart}>
          <div className={styles.blockWrap}>
            <div className={styles.blockHead}>
              <p>本年度评估期内信披减分</p>
            </div>
            <div className={styles.blockBody}>
              <table id="deduction-table" className={styles.commonTable}>
                <thead>
                  <tr className={styles.tableHeader}>
                    <th className={styles.deductionContent}>
                      <span>扣分内容</span>
                    </th>
                    <th>
                      <span>处理机构</span>
                    </th>
                    <th>
                      <span>扣分类型</span>
                    </th>
                    <th>
                      <span>扣分时间</span>
                    </th>
                    <th>
                      <span>严重程度</span>
                    </th>
                  </tr>
                </thead>
                <tbody>{renderCompliance()}</tbody>
              </table>
            </div>
          </div>

          <div className={styles.blockWrap}>
            <div className={styles.blockHead}>
              <p>本年度其他违规项</p>
            </div>
            <div className={styles.blockBody}>
              <table id="deduction-table" className={styles.commonTable} border="1px">
                <thead>
                  <tr className={styles.tableHeader}>
                    <th className={styles.deductionContent} width="60">
                      <span>序号</span>
                    </th>
                    <th>
                      <span>事项内容</span>
                    </th>
                    <th>
                      <span>处理原因说明</span>
                    </th>
                    <th width="120">
                      <span>时间</span>
                    </th>
                  </tr>
                </thead>
                <tbody>{renderOViolation()}</tbody>
              </table>
            </div>
          </div>

          <div className={styles.blockWrap}>
            <div className={styles.blockHead}>
              <p>行业其他公司最新监管违规项</p>
            </div>
            <div className={styles.blockBody}>
              <table id="deduction-table" className={styles.commonTable}>
                <thead>
                  <tr className={styles.tableHeader}>
                    <th className={styles.deductionContent}>
                      <span>扣分内容</span>
                    </th>
                    <th>
                      <span>处理机构</span>
                    </th>
                    <th>
                      <span>扣分类型</span>
                    </th>
                    <th>
                      <span>扣分时间</span>
                    </th>
                    <th>
                      <span>严重程度</span>
                    </th>
                  </tr>
                </thead>
                <tbody>{renderCompliance()}</tbody>
              </table>
            </div>
          </div>
        </div>

        <div className={styles.rightPart}>
          <div className={styles.blockWrap}>
            <div className={styles.blockHead}>
              <p>行业监管处罚类型分布</p>
            </div>
            <div className={styles.blockBody}>{renderPunishChart()}</div>
          </div>

          <div className={styles.blockWrap}>
            <div className={styles.blockHead}>
              <p>行业监管处罚TOP5(本年度)</p>
            </div>
            <div className={styles.blockBody}>{renderFiveChart()}</div>
          </div>
        </div>
      </div>
    );
  }
}

export default creditRisk;
